<template>
  <li class="trade-item clearfix">
    <ul class="clearfix">
      <li class="b1">出售<span style="color:#EFA901">{{value.sell_amount}}</span>普通语点</li>
      <li class="b2" style="color:#E56307">{{value.price}}钻石语点</li>
      <li class="b3">{{value.user__username}}</li>
      <li class="b4">{{moment(value.create_time).format('YYYY-MM-DD hh:mm:ss')}}</li>
      <li class="b5">在售</li>
      <li class="b6"><button class="blue-btn-outline" @click="handleBuy">购买</button></li>
    </ul>
  </li>
</template>

<script>
import moment from 'moment'
import { buyTrade } from 'api/user'
export default {

  name: 'tradeItem',
  props: {
    value: {
      type: Object,
      default: function() {
        return {/*  */}
      }
    }
  },
  data() {
    return {
      moment
    };
  },
  methods: {
    handleBuy() {
      buyTrade({
        id: this.value.id
      })
      .then(res => {
        console.log(res)
        this.$message({
          message: '购买成功',
          type: 'success'
        })
      })
      .catch(err => {
        this.$message({
          message: err.msg,
          type: 'error'
        })
      })
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.trade-item{
  border-bottom: 1px solid #e5e6e7;
  width: 100%;
  >ul{
    >li{
      float: left;
      text-align: center;
      height: 90px;
      line-height: 90px;
    }
    .b1{width: 160px;text-align: left;}
    .b2{width: 150px;}
    .b3{width: 150px;}
    .b4{width: 200px;}
    .b5{width: 150px;}
    .b6{
      width: 60px;
      text-align: right;
      >button{
        line-height: 1.5;
      }
    }
  }
}
</style>